
<template>
	<!-- 校区工作台 -->
	<main-box :vtitle="'测试'" :vtype="2">
		<el-row :gutter="16">
			<el-col :span="14">
				<el-row class="title">数据概览</el-row>
				<el-row :gutter="10">
					<el-col :span="8">
						<div class="box-sumary">
							<div class="value">10</div>
							<div class="name">开班数</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="box-sumary">
							<div class="value">51</div>
							<div class="name">在校生</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="box-sumary">
							<div class="value">90%</div>
							<div class="name">满园率</div>
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="10" style="margin-top: 0.1rem;">
					<el-col :span="8">
						<div class="box-sumary">
							<div class="value">6</div>
							<div class="name">预备生</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="box-sumary">
							<div class="value">6</div>
							<div class="name">上月离园</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="box-sumary">
							<div class="value">5</div>
							<div class="name">本月新生</div>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="10">
				<el-row class="title">任务通知</el-row>
				<el-row class="box-tasks" style="border: 0.01rem solid #666666;">
					<el-row :gutter="10" class="message-row" v-for="(row,index) in tasks" :key="index">
						<el-col :span="3" class="col-img">
							<img src="~@/assets/img/top/top_message.png">
						</el-col>
						<el-col :span="18">
							{{row.txt}}
						</el-col>
						<el-col :span="3">
							<el-button type="text"><span class="btndetails">查看</span></el-button>
						</el-col>
					</el-row>
				</el-row>
			</el-col>
		</el-row>
		<el-row :gutter="10" style="margin-top:0.25rem;">
			<el-row class="title">校区班级</el-row>
			<el-row :gutter="10" class="box-class">
				<el-col :span="6" v-for="(row,index) in classList" :key="index">
					<div class="classItem">
						<el-row class="className">{{row.className}}</el-row>
						<el-row>
							<el-col :span="14">班级学生数：{{row.curStudent}}/{{row.allStudent}}</el-col>
							<el-col :span="10">满班率：{{(row.curStudent/row.allStudent).toFixed(2)}}</el-col>
						</el-row>
						<el-row>
							<el-col :span="14">预备生：{{row.yubeisheng}}</el-col>
							<el-col :span="10">剩余位置：{{row.sywz}}</el-col>
						</el-row>
					</div>
				</el-col>
			</el-row>
		</el-row>
	</main-box>
</template>

<script>
	export default{
		components:{},
		data(){
			return {
				tasks:[
					{
						txt:'有5个续费任务'
					},
					{
						txt:'有5个退费任务'
					},
					{
						txt:'11月的考勤需要提交'
					},
					{
						txt:'有10个离园退费任务'
					},
					{
						txt:'有10个离园退费任务'
					},
				],
				classList:[
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
					{
						className:'三年二班',
						curStudent:10,
						allStudent:19,
						yubeisheng:1,
						sywz:9
					},
				]
			}
		},
		methods:{
			
		},
		mounted(){
			
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size: 0.18rem;
		color: #333333;
		margin-bottom: 0.1rem;
	}
	// 数据概览
	.box-sumary{
		width: 100%;
		height: 1.3rem;
		border: 0.01rem solid #666666;
		color: #333333;
		border-radius: 0.1rem;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		.value{
			font-size: 0.25rem;
			width: 100%;
			text-align: center;
		}
		.name{
			font-size: 0.18rem;
			width: 100%;
			text-align: center;
		}
	}
	// 任务通知
	.box-tasks{
		border: 0.01rem solid rgb(102, 102, 102);
		border-radius: 0.05rem;
		height: 2.72rem;
		overflow-x: hidden;
		overflow-y: auto;
		.message-row{
			height: 0.675rem;
			line-height: 0.675rem;
			.btndetails{
				font-size: 0.18rem;
			}
			.col-img{
				text-align: center;
				img{
					height: 0.24rem;
				}
			}
		}
	}
	.box-class{
		.classItem{
			border: 0.01rem solid #666666;
			color: #333333;
			border-radius: 0.1rem;
			height: 1.3rem;
			margin-bottom: 0.1rem;
			padding: 0.1rem;
			font-size: 0.16rem;
			.className{
				font-size: 0.2rem;
				margin: 0.1rem;
				font-weight: bold;
				text-align: center;
			}
		}
	}


	/*自定义滚动条样式*/
	.box-tasks::-webkit-scrollbar {
		// height: 0.08rem;
		width: 0.05rem;
	}
	.box-tasks::-webkit-scrollbar-thumb {
		border-radius: 0.5rem;
		background: #BBBBBB;
	}
	.box-tasks::-webkit-scrollbar-track {
		background: rgba(242, 246, 252, 0);
	}	

	
</style>